import React, { Component } from 'react';

interface IProps {}

interface IState {
  name: string;
  list: string[];
}

export default class App extends Component<IProps, IState> {
  state = {
    name: '',
    list: [],
  };

  myRef = React.createRef<HTMLInputElement>();

  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}</h1>
        <div>
          <input
            type="text"
            placeholder="输入待办事项"
            value={this.state.name}
            onChange={(evt) => {
              this.setState({ name: evt.target.value });
            }}
          />
          <button
            onClick={() => {
              this.setState({
                list: [...this.state.list, this.state.name],
                name: '',
              });
            }}
          >
            add
          </button>
        </div>
        <div>
          <ul>
            {this.state.list.map((item, index) => {
              return (
                <li key={item}>
                  <span>{item}</span>
                  <button
                    onClick={() => {
                      let arr = [...this.state.list];
                      arr.splice(index, 1);
                      this.setState({
                        list: arr,
                      });
                    }}
                  >
                    del
                  </button>
                </li>
              );
            })}
            {this.state.list.length === 0 && <li>暂无待办事项</li>}
          </ul>
        </div>
        <div>
          <h1>ref</h1>
          <input
            type="text"
            ref={this.myRef}
          />
          <button
            onClick={() => {
              console.log((this.myRef.current as HTMLInputElement).value);
            }}
          >
            click
          </button>
        </div>
      </div>
    );
  }
}
